{% extends 'console.html' %}

{% block maincontent %}
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-form layui-card-header layuiadmin-card-header-auto" id="searchForm">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">数据源</label>
                        <div class="layui-input-inline">
                            <select id="source" name="source" lay-verify="source" lay-search>
                                <option value="">直接选择或搜索选择</option>
                                <!-- 动态展示区域 -->
                            </select>
                        </div>
                    </div>

                    <div class="layui-inline">
                        <label class="layui-form-label">schema</label>
                        <div class="layui-input-inline">
                            <input type="text" id="schema" placeholder="schema" class="layui-input"
                                   lay-affix="clear">
                        </div>
                    </div>

                    <div class="layui-inline">
                        <label class="layui-form-label">表名</label>
                        <div class="layui-input-inline">
                            <input type="text" id="table_name" placeholder="表名" class="layui-input"
                                   lay-affix="clear">
                        </div>
                    </div>

                    <div class="layui-inline">
                        <label class="layui-form-label">字段名</label>
                        <div class="layui-input-inline">
                            <input type="text" id="column_name" placeholder="字段名" class="layui-input"
                                   lay-affix="clear">
                        </div>
                    </div>

                    <div class="layui-inline">
                        <button class="layui-btn layuiadmin-btn-list" id="btnSearch">
                            <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>搜索
                        </button>
                    </div>

                    <div class="layui-inline">
                        <button class="layui-btn layuiadmin-btn-list layui-btn-primary" type="reset" id="customReset">
                            <i class="layui-icon layui-icon-set-sm layuiadmin-button-btn"></i>重置
                        </button>
                    </div>

                    <div class="layui-inline">
                        <button class="layui-btn layuiadmin-btn-list layui-btn-normal" id="exportAllBtn"
                                lay-filter="exportAllBtn" lay-event="exportAllBtn">
                            <i class="layui-icon layui-icon-export layuiadmin-button-btn"></i>导出cvs
                        </button>
                    </div>
                </div>
            </div>

            <div class="layui-card-body">
                <!-- 数据表格 -->
                <table id="tableInfosTable" lay-filter="tableInfosTable"></table>
            </div>
        </div>
    </div>
{% endblock %}

{% block script %}

    <!-- 自定义工具栏 -->
    <script type="text/html" id="toolbarDemo">
        <!--<button class="layui-btn" id="exportAllBtn" lay-filter="exportAllBtn" lay-event="exportAllBtn">导出全部</button>-->
    </script>

    <!-- 操作列模板 -->
    <!--<script type="text/html" id="barOption">
        <a class="layui-btn layui-btn-xs" lay-event="view">查看</a>
        <a class="layui-btn layui-btn-xs" lay-event="more">
            更多
            <i class="layui-icon layui-icon-down"></i>
        </a>
    </script>-->

    <script>
        layui.use(['table', 'form', 'layer', 'dropdown'], function () {
            var $ = layui.$;
            var table = layui.table;
            var layer = layui.layer;
            var form = layui.form;
            var dropdown = layui.dropdown;

            // 初始化时加载下拉框数据
            $.ajax({
                url: '/dcs/api/getSources',
                type: 'GET',
                dataType: 'json',
                success: function (res) {
                    if (res.code === 0) {
                        var html = '<option value="">直接选择或搜索选择</option>';
                        $.each(res.data, function (index, item) {
                            html += '<option value="' + item.source + '">' + item.source + '</option>';
                        });
                        $('#source').html(html);
                        // 重新渲染表单
                        form.render('select');
                    }
                },
                error: function () {
                    layer.msg('数据加载失败');
                }
            });

            // 初始化表格
            var tableInfosLayuiTable = table.render({
                elem: '#tableInfosTable',
                url: '/dcs/api/tableInfos',
                method: 'get',
                page: {
                    limit: 10, //每页显示条数
                    limits: [10, 20, 50, 100],
                    curr: 1, //起始页
                    groups: 5, //连续页码个数
                    prev: '上一页', //上一页文本
                    next: '下一页', //下一页文本
                    first: 1, //首页文本
                    //, last: 100                     //尾页文本
                    layout: ['prev', 'page', 'next',
                        'refresh', 'skip', 'count',
                        'limit']
                },
                // height: 600,
                toolbar: '#toolbarDemo',
                // defaultToolbar: ['filter', 'exports'],
                defaultToolbar: ['filter', {
                    title: '导出全部数据',
                    layEvent: 'EXPORT_ALL',
                    icon: 'layui-icon-export'
                }],
                cols: [
                    [ // 表头
                        // {type: 'checkbox', fixed: 'left'},
                        {
                            field: 'source',
                            title: '数据源名称',
                            width: 130,
                            align: 'left',
                            fixed: 'left',
                            // templet: addlink,
                            sort: true
                        },
                        // source, schema, table_name, table_comment, column_num, column_name, data_type, data_default, nullable, pkey, column_commen
                        // creation_date
                        {field: 'database_type', title: '数据库类型', width: 130, align: 'center'},
                        {field: 'schema', title: 'schema', width: 180, align: 'left'},
                        {field: 'table_name', title: '表名', width: 200, align: 'left'},
                        {field: 'table_comment', title: '表注释', width: 180, align: 'left'},
                        {field: 'column_num', title: '列号', width: 70, align: 'center'},
                        {field: 'column_name', title: '字段名', width: 200, align: 'left'},
                        {field: 'data_type', title: '类型', width: 180, align: 'left'},
                        {field: 'data_default', title: '数据默认值', width: 180, align: 'left', sort: true},
                        {field: 'nullable', title: '可空', align: 'left'},
                        {field: 'pkey', title: '主键', align: 'left'},
                        {field: 'column_comment', title: '字段注释', width: 180, align: 'left'},
                        {field: 'creation_date', title: '更新时间', width: 180, align: 'left', fixed: 'right'}
                        // ,{fixed: 'right', title: '操作', width: 150, toolbar: '#barOption'}
                    ]
                ]
            });

            // 导出按钮事件 监听工具栏事件
            table.on('toolbar(tableInfosTable)', function (obj) {
                if (obj.event === 'EXPORT_ALL') {
                    exportAllDataFromConditions();
                }
            });

            // 监听工具栏事件
            // table.on('toolbar(tableInfosTable)', function (obj) {
            //     if (obj.event === 'EXPORT_ALL') {
            //
            //         var source2 = $('#source').val();
            //         var schema2 = $('#schema').val();
            //         var table_name2 = $('#table_name').val();
            //         var column_name2 = $('#column_name').val();
            //
            //         // 显示加载中
            //         var loadIndex = layer.load(2);
            //
            //         // 慢
            //         // $.ajax({
            //         //     type: "get",
            //         //     url: '/dcs/api/tableInfos',
            //         //     data: {
            //         //         "limit": "1000000",
            //         //         "page": "1",
            //         //         "source": source2,
            //         //         "schema": schema2,
            //         //         "table_name": table_name2,
            //         //         "column_name": column_name2
            //         //     },
            //         //     dataType: "json",
            //         //     success: function (rd) {
            //         //         table.exportFile('tableInfosTable', rd['data'], 'xls');
            //         //         layer.close(loadIndex);
            //         //     },
            //         //     error: function () {
            //         //         layer.close(loadIndex);
            //         //         layer.msg('导出失败，请重试', {icon: 2});
            //         //     }
            //         // });

            //         // 直接跳转到后端导出路由
            //         // window.location.href = '/dcs/api/tableInfos?export=1';
            //     }
            // });

            // 加载数据函数
            function loadData() {
                var source = $('#source').val();
                var schema = $('#schema').val();
                var table_name = $('#table_name').val();
                var column_name = $('#column_name').val();
                tableInfosLayuiTable.reload({
                    where: {
                        source: source,
                        schema: schema,
                        table_name: table_name,
                        column_name: column_name
                    },
                    page: {curr: 1}
                });
            }

            function exportAllDataFromConditions() {
                layer.confirm('导出当前查询条件的所有数据吗？', function (index) {
                    layer.close(index);
                    // 显示加载中
                    var loadIndex = layer.load(2);

                    var source2 = $('#source').val();
                    var schema2 = $('#schema').val();
                    var table_name2 = $('#table_name').val();
                    var column_name2 = $('#column_name').val();

                    // 构建导出URL url: '/dcs/api/tableInfos?export=1',
                    var exportUrl = '/dcs/api/tableInfos?export=1&';

                    exportUrl += 'source' + '=' + encodeURIComponent(source2) + '&';
                    exportUrl += 'schema' + '=' + encodeURIComponent(schema2) + '&';
                    exportUrl += 'table_name' + '=' + encodeURIComponent(table_name2) + '&';
                    exportUrl += 'column_name' + '=' + encodeURIComponent(column_name2) + '&';

                    // for (var key in searchParams) {
                    //     if (searchParams[key]) {
                    //         exportUrl += key + '=' + encodeURIComponent(searchParams[key]) + '&';
                    //     }
                    // }

                    // 创建隐藏的iframe进行下载
                    var iframe = document.createElement('iframe');
                    iframe.style.display = 'none';
                    iframe.src = exportUrl;
                    document.body.appendChild(iframe);

                    layer.close(loadIndex);
                });
            }

            // 搜索功能 - 按钮的点击事件
            $('#btnSearch').click(function () {
                loadData();
            });

            // 自定义重置按钮事件
            $('#customReset').click(function () {
                // 重置下拉框
                $("select[name='source']").val("");
                // 重置文本框的值
                $("#schema").val("");
                $("#table_name").val("");
                $("#column_name").val("");
                // 重新渲染表单
                form.render();
            });

            // 导出全部
            $('#exportAllBtn').click(function () {
                exportAllDataFromConditions();
            });
        });
    </script>
{% endblock %}


